<template>
	<view>
		<view class="waterfall-box" :class="{'hidden':hideList}">
			<view class="h-flex-x helang-waterfall-slot">
				<slot name="default" v-bind:colWidth="colWidth" v-bind:list="renderList"></slot>
			</view>
		</view>
		<image
			class="load-image" 
			mode="widthFix"
			v-for="(item,index) in waitRenderList" 
			:key="index + Date.now()" 
			:src="item[IMAGE_URL_KEY]" 
			:data-index="index"
			@load="handleImageLoad" 
			@error="handleImageLoad"
		></image>
	</view>
</template>

<script>
	// 渲染状态
	const RENDER_STATUS = {
		// 加载中
		LOADING: 'RENDER_LOADING',
		// 渲染开始
		START:'RENDER_START',
		// 渲染结束
		END:'RENDER_END'
	};
	export default {
		props:{
			imgKey: {
				type: String,
				default: () => 'img'
			}
		},
		data(){
			return {
				// 图片链接键名
				IMAGE_URL_KEY: '',
				// 图片高度键名
				IMAGE_HEIGHT_KEY: '__waterfall_imageHeight',
				// 没有图片纯文字高度
				DEFAULT_HEIGHT: 100,
				// 没有图片纯文字高度
				IS_IMAGE_KEY: '__waterfall_IS_IMAGE',
				//列宽
				colWidth: 720 / 2,
				// 待渲染列表
				waitRenderList:[],
				// 渲染列表
				renderList:[[],[]],
				// 渲染列表高度
				renderListHeight:[0,0],
			}
		},
		created() {
			this.IMAGE_URL_KEY = this.imgKey;
			//this.render()
		},
		methods:{
			render(list){
				
				
				
				let data = list
				if(Array.isArray(data) && data.length > 0) {
					//判断是否有图片
					data.forEach(i=>{
						if(i[this.IMAGE_URL_KEY] === '' || i[this.IMAGE_URL_KEY] === undefined || i[this.IMAGE_URL_KEY] === null){
							i[this.IS_IMAGE_KEY] = false 
							i[this.IMAGE_HEIGHT_KEY] = this.DEFAULT_HEIGHT
							//默认触发
							i[this.IMAGE_URL_KEY] = '/noImage'
						} else {
							i[this.IS_IMAGE_KEY] = true 
						}
					})
					this.waitRenderList = data
				  
				    
				}
				 else {
					this.emitRenderStatusChange(RENDER_STATUS.END);
				}
				
			},
			reload(){
				
				this.waitRenderList = []
				// 渲染列表
				this.renderList = [[],[]]
				// 渲染列表高度
				this.renderListHeight = [0,0]
				//this.emitRenderStatusChange(RENDER_STATUS.END);
			},
			handleImageLoad(e) {
			
				let { width = 0, height = 0 } = e.detail;
				const { index } = e.currentTarget.dataset;
			
				//const renderHeight = width === 0 ? 0 : parseInt(IMAGE_PX_WIDTH / width * height);
				
				//赋值图片高度
				if(e.type === "load") {
					this.addWaitRenderListImageHeight(index, height);
				} else {
					this.waitRenderList[index][this.IS_IMAGE_KEY] = false
					this.waitRenderList[index][this.IMAGE_HEIGHT_KEY] = this.DEFAULT_HEIGHT
					//默认触发
					this.waitRenderList[index][this.IMAGE_URL_KEY] = '/noImage'
				}
				
		
				if(this.checkImageHaveHeight()){
					this.emitRenderStatusChange(RENDER_STATUS.START);
					this.addRenderData();
				}
			},
			// 待渲染列表添加图片高度数据
			addWaitRenderListImageHeight(index,height){
	
				if(this.waitRenderList[index][this.IMAGE_URL_KEY] === '/noImage') return
				if(this.waitRenderList[index][this.IMAGE_HEIGHT_KEY] && this.waitRenderList[index][this.IMAGE_HEIGHT_KEY].indexOf('?x-oss-process=video/snapshot,t_0,f_jpg,w_360') > 0) {
					//视频
					this.waitRenderList[index][this.IMAGE_HEIGHT_KEY] = height;
				} else {
					if(height > 700) {
						height = 700
					}
					this.waitRenderList[index][this.IMAGE_HEIGHT_KEY] = height;
				}
				
				
			},
			// 检查图片是否已全部包含高度
			checkImageHaveHeight(){
				const index = this.waitRenderList.findIndex((item)=>{
					return item[this.IMAGE_HEIGHT_KEY] === undefined;
				})
	
				return index === -1 ? true : false;
			},
			// 渲染状态变更
			emitRenderStatusChange(status){
				this.$emit("statusChange",status);
			},
			// 添加渲染数据
			addRenderData(){
				this.waitRenderList.forEach(i=>{
					this.pushRender(i);
				})
				this.waitPushIndex = 0;
				this.waitRenderList = [];
				this.emitRenderStatusChange(RENDER_STATUS.END);
	
			},
			// 追加渲染数据
			pushRender(data){
				
				const index = this.findSmallColIndex();
			
				
				if(data[this.IMAGE_URL_KEY] != '/noImage') {
					this.renderList[index].push({
						...data,
						[this.IMAGE_HEIGHT_KEY]: `${data[this.IMAGE_HEIGHT_KEY]}`
					});
					this.renderListHeight[index] += data[this.IMAGE_HEIGHT_KEY]
					this.renderListHeight[index] += 19
				
				} else {
					this.renderList[index].push({
						...data
					});
					this.renderListHeight[index] += data[this.IMAGE_HEIGHT_KEY]
					
				}
				this.renderListHeight[index] += 50

				
			},
			// 查找最小高度的列的索引
			findSmallColIndex(){
				return this.renderListHeight[0] > this.renderListHeight[1] ? 1 : 0
			},
		}
	}
</script>

<style>
	/* https://ext.dcloud.net.cn/plugin?id=5280 */
	/* 小程序模式下插槽会增加一个 <scoped-slots-default> DOM节点 */
	
</style>
<style lang="scss" scoped>
.waterfall-box {
		padding: 0 10rpx;
		box-sizing: border-box;
		
		&.hidden{
			display: none;
		}
		
		.list-item{
			margin-bottom: 0;
			// 设置透明，默认是可视的
			opacity: 0;
			// 默认超出隐藏，不影响加载中的文字显示效果
			overflow: hidden;
			height: 0;
			
			&.show{
				margin-bottom: 20rpx;
				opacity: 1;
				overflow: auto;
				height: auto;
			}
		}
	}

	.h-flex-x {
		display: flex;
		&>div {
			flex: 1;
			background: red;
		}
	}
	
	.load-image{
		// display: none !important;
		width: 360rpx!important;
	}
</style>